<template>
  <div class="topbar">
    <div class="top-h">
      <div class="top-m banxin tanxin">
        <h1 class="logo">
          <a href="#">网易云音乐</a>
        </h1>
        <ul class="tanxin">
          <li><span>发现音乐</span></li>
          <li @click="$router.push('/Mymusic')"><span>我的音乐</span></li>
          <li><span>关注</span></li>
          <li><span>商城</span></li>
          <li><span>音乐人</span></li>
          <li><span>下载客户端</span> <sup class="hot">&nbsp;</sup></li>
        </ul>
        <div class="search">
          <span class="search-in">
            <!-- input要给宽度 占90% -->
            <input type="text" name="" id="" />
            <!-- label定位到input框中 -->
            <label> 音乐/视频/电台/用户</label>
          </span>
        </div>
        <a href="#" class="created" style="color: #999">创作者中心</a>
        <div style="color: #999" class="log" @click="goLogin" v-show="$store.state.dlimgShow">登录</div>
        <img width="30 " style="border-radius:10px" v-show="$store.state.dlimgShow" :src="profile.avatarUrl" class="log" alt="" />
      </div>
    </div>
    <div class="nav">
      <div class="nav-in"></div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import {usermsg,userdetail,userplaylist} from '@/request/api';
export default {
  data() {
    return {
      profile:""
    };
  },
  created() {
    let a = localStorage.getItem("id")
    usermsg().then(res=>{
      console.log("用户数据",res.data);
    })
    userdetail(a).then(res=>{
     this.profile = res.data.profile
          console.log("detail",this.profile);
    })
  //  userplaylist(a).then(res=>{
  //   console.log("用户歌单",res.data);
  //  })
  },
  methods: {
    ...mapMutations(["changeLoginShow"]),
    goLogin() {
      this.changeLoginShow(true);
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets//base.less";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.topbar {
  .top-h {
    position: relative;
    z-index: 1000;
    height: 70px;
    box-sizing: border-box;
    background: #242424;
    border-bottom: 1px solid #000;
    line-height: 70px;
    .top-m {
      align-items: center;
      .logo {
        float: left;
        width: 176px;
        height: 69px;
        background: url("https://s2.music.126.net/style/web2/img/frame/topbar.png?bf8e11af3180da8a9b9f13ae878219a3")
          no-repeat 0 9999px;
        background-position: 0 0;
        a {
          font-size: 20px;
          display: block;
          width: 157px;
          height: 100%;
          padding-right: 20px;
          text-indent: -9999px;
          color: #fff;
        }
      }
      ul {
        justify-content: flex-start;
        width: 450px;
        li {
          position: relative;
          width: 94px;
          height: 70px;
          line-height: 70px;
          text-align: center;
          span {
            display: block;
            color: #999;
            height: 70px;
            font-size: 14px;
          }
          .hot {
            background: url("https://s2.music.126.net/style/web2/img/frame/topbar.png?bf8e11af3180da8a9b9f13ae878219a3")
              no-repeat 0 9999px;
            background-position: -190px 0;
            display: block;
            position: absolute;
            top: 21px;
            left: 80px;
            width: 28px;
            height: 19px;
            background-position: -190px 0;
          }
        }
      }
      .search {
        background: url("https://s2.music.126.net/style/web2/img/frame/topbar.png?bf8e11af3180da8a9b9f13ae878219a3")
          no-repeat 0 9999px;
        background-position: 0 -98px;
        background-color: #fff;
        border-radius: 32px;
        transform: translateX(30px);
        width: 158px;
        height: 32px;
        line-height: 32px;
        .search-in {
          display: block;
          position: relative;
          margin: 0 0 0 30px;
          input {
            width: 90%;
            margin: 0;
            padding: 0;
            background: transparent;
            color: #fff;
            border: 0;
          }
          label {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 90%;
            color: #9b9b9b;
            cursor: text;
            font-size: 12px;
          }
        }
      }
      .created {
        width: 90px;
        height: 32px;
        margin: 0 0 0 12px;
        box-sizing: border-box;
        padding-left: 16px;
        border: 1px solid #4f4f4f;
        background-position: 0 -140px;
        line-height: 32px;
        color: #ccc;
        border-radius: 20px;
        font-size: 10px;
      }
      .log {
        transform: translateX(-30px);
        font-size: 10px;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}
</style>